<template>
  <div class="picture-list">
    <Waterfall :list="dataList" :breakpoints="breakpoints" :gutter="16">
      <template #default="{ item: picture }">
        <div class="waterfall-card">
          <a-card :body-style="{ padding: 0 }" hoverable @click="doClickPicture(picture)">
            <template #cover>
              <LazyImg :alt="picture.name" :url="picture.url" class="waterfall-image"  />
            </template>
            <a-card-meta :title="picture.name" style="padding: 12px" >
              <template #description>
                <a-flex>
                  <a-tag color="green">
                    {{ picture.category || '默认' }}
                  </a-tag>
                  <a-tag v-for="tag in picture.tags" :key="tag">
                    {{ tag }}
                  </a-tag>
                </a-flex>
                <!-- 统计信息区域 -->
                <a-flex
                  justify="space-between"
                  align="center"
                  style="padding: 0 8px; margin-top: 8px"
                >
                  <div class="stats-item">
                    <EyeOutlined style="color: #8c8c8c" />
                    <span style="margin-left: 4px; color: #8c8c8c">{{ picture.views || 0 }}</span>
                  </div>
                  <div class="stats-item like-btn" :class="{ liked: picture.liked }">
                    <HeartOutlined :style="{ color: picture.liked ? '#eb2f96' : '#8c8c8c' }" />
                    <span style="margin-left: 4px; color: #8c8c8c">{{ picture.likes || 0 }}</span>
                  </div>
                </a-flex>
              </template>
            </a-card-meta>
            <template #actions>
              <ShareAltOutlined @click="(e) => doShare(picture, e)" />
              <SearchOutlined />
              <EditOutlined />
              <DeleteOutlined />
            </template>
          </a-card>
        </div>
      </template>
    </Waterfall>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
import {
  EyeOutlined,
  HeartOutlined,
  ShareAltOutlined,
  SearchOutlined,
  EditOutlined,
  DeleteOutlined,
} from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式断点配置
const breakpoints = {
  1200: { rowPerView: 4 }, // 大屏幕显示4列
  800: { rowPerView: 3 }, // 中等屏幕显示3列
  600: { rowPerView: 2 }, // 小屏幕显示2列
  0: { rowPerView: 1 }, // 超小屏幕显示1列
}
interface Props {
  dataList?: API.PictureVO[]
}

const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  loading: false,
  showOp: false,
  canEdit: false,
  canDelete: false
})


// 跳转至图片详情页
const doClickPicture = (picture: API.PictureVO) => {
  router.push({
    path: `/picture/${picture.id}`
  })
}

// ----- 分享操作 ----
const shareModalRef = ref()
// 分享链接
const shareLink = ref<string>()
// 分享
const doShare = (picture, e) => {
  // 阻止冒泡
  e.stopPropagation()
  shareLink.value = `${window.location.protocol}//${window.location.host}/picture/${picture.id}`
  if (shareModalRef.value) {
    shareModalRef.value.openModal()
  }
}
</script>


<style scoped>
/* 保留原有样式 */
.stats-item {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  transition: all 0.3s;
}
.like-btn {
  cursor: pointer;
  border-radius: 4px;
}
.like-btn:hover {
  background-color: #fff1f0;
}
.like-btn:hover :deep(svg) {
  color: #eb2f96 !important;
}
.liked {
  color: #eb2f96;
}
</style>
